'use client';

import React from 'react';
import Title from '../Title';
import { Space } from 'antd';
import styles from '../../pages.module.scss';	
import Box from '../CustomerStatistics/Box';
// import a from './a.svg';
// import b from './b.svg';
import gridCircle from './grid-circle.svg';
import orderCircle from './order-circle.svg'
import { useStatisticsData } from '../../hooks/useStatisticsData';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 


// 是否写死 oceanMonthTeu
// let oceanMonthTeu =
//   typeof window !== 'undefined' &&
//   new URL(window.location.href).searchParams.get('oceanMonthTeu') as number | null;
let oceanMonthTeu = 257

const ShippingStatistics: React.FC = () => {
	const { data } = useStatisticsData();

	return (
		<Space
			style={{
			    padding: px2vw(24) + ' ' + px2vw(12) + ' ' + px2vw(24) + ' ' + px2vw(24),
				borderRadius: px2vw(16),
			}}
			className={styles.spaceWrap}
			direction="vertical"
			size={12}
		>
			<Title title="海运出运统计" />
			<Box
				icon={gridCircle.src}
				label="年度出运量"
				value={Number(data?.oceanYearTeu || 0)}
				unit={'TEU'}
			/>
			{/* <Box
				icon={gridCircle.src}
				label="数字化订舱量"
				value={Number(data?.oceanYdbYearTeu || 0)}
				unit={'TEU'}
			/> */}
			<Box
				icon={gridCircle.src}
				label="上年度出运量"
				value={Number(data?.lastYearOceanYearTeu || 0)}
				unit={'TEU'}
			/>
			<Box
				icon={orderCircle.src}
				label={oceanMonthTeu ? '2025年同比增速' : "当前业务量同比"}
				// value={oceanMonthTeu ? 59 : Number(data?.oceanMonthTeu || 0)}
				value={Number(data?.yearGrowthRate || 0)}
				// value={oceanMonthTeu ? Number(data?.yearGrowthRate || 0) : Number(data?.oceanMonthTeu || 0)}
				unit={oceanMonthTeu ? '%' : 'TEU'}
				unitSize={oceanMonthTeu ? 16 : 12}
			/>
			{/* <CrossCard
				leftTop={
					<StatisticCard
						icon={a.src}
						title="年度出运量"
						value={Number(data?.oceanYearTeu || 0)}
						unit="TEU"
					/>
				}
				rightTop={
					<StatisticCard
						icon={a.src}
						title="月度出运量"
						value={Number(data?.oceanMonthTeu || 0)}
						unit="TEU"
					/>
				}
				leftBottom={
					<StatisticCard
						icon={b.src}
						title="年度海运订单出运数"
						value={Number(data?.oceanYearShipmentCount || 0)}
						unit="单"
					/>
				}
				rightBottom={
					<StatisticCard
						icon={b.src}
						title="年度海运订单接单数"
						value={Number(data?.oceanYearReceiveCount || 0)}
						unit="单"
					/>
				}
			/> */}
		</Space>
	);
};

export default ShippingStatistics;

